<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row v-show="showSearch">
        <el-form :model="state.queryForm"
                 ref="queryRef"
                 :inline="true"
                 @keyup.enter="getDataList">

        </el-form>
      </el-row>
      <el-row>
        <div class="mb8"
             style="width: 100%">
          <el-button icon="folder-add"
                     type="primary"
                     class="ml10"
                     @click="formDialogRef.openDialog()"
                     v-auth="'model_modelSort_add'">
            新 增
          </el-button>

          <right-toolbar v-model:showSearch="showSearch"
                         :export="'model_modelSort_export'"
                         @exportExcel="exportExcel"
                         class="ml10 mr20"
                         style="float: right;"
                         @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
                style="padding: 8px"
                v-for="(item, index) in state.dataList"
                :key="index"
                @click="openGen(item.id, item.name)">
          <el-card :body-style="{ padding: '10px' }"
                   style="height: 140px">
            <el-row style="padding: 10px">
              <el-col :span="3"><img width="24"
                     src="/img/1.png"
                     class="align-image"></el-col>
              <el-col :span="17"><span class="align-text">{{ item.name }}</span></el-col>
              <el-col :span="3"><span class="align-c">{{ item.counts }}</span></el-col>
              <el-col :span="1"
                      style="padding-top:2px;">
                <el-dropdown class="dropdown">
                  <img width="5"
                       @click.stop
                       src="/img/more.png" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="formDialogRef.openDialog(item.id)">修改</el-dropdown-item>
                      <el-dropdown-item @click="handleDelete([item.id])">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

              </el-col>

            </el-row>

            <div>
              <div class="timeSort">
                <time class="time">分类ID：{{ item.id }}</time>
              </div>
              <div class="timeSort">
                <time class="time">创建人：{{ item.createBy }}</time>
              </div>
              <div class="timeSort">
                <time class="time">备注：{{ item.remarks }}</time>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <pagination @size-change="sizeChangeHandle"
                  @current-change="currentChangeHandle"
                  v-bind="state.pagination" />
    </div>

    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef"
                 @refresh="getDataList(false)" />

  </div>
</template>

<script setup lang="ts" name="systemModelSort">
import { BasicTableProps, useTable } from '/@/hooks/tableSort';
import { fetchList, delObjs } from '/@/api/knowledge/dataset';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典

const { model_sort_stauts } = useDict('model_sort_stauts');

const dialogVisible = ref(false);

// 定义变量内容
const formDialogRef = ref();
const router = useRouter();

// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

const deleteById = () => {
	console.log();
};

// 导出excel
const exportExcel = () => {
	downBlobFile('/model/modelSort/export', Object.assign(state.queryForm, { ids: selectObjs }), 'modelSort.xlsx');
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

const openGen = (id, name) => {
	router.push(
		{
			path: '/model/management/index',
			query: {
				sortid: id,
				sortName: name,
			},
		},
		() => {
			window.open('/model/management/index', '_blank');
		}
	);
};

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(ids);
		getDataList();
		useMessage().success('删除成功');
	} catch (err) {
		useMessage().error(err.msg);
	}
};
</script>
<style scoped>
.container {
	height: 50px;
	display: flex;
	padding: 15px 15px 15px 15px;
}
.align-text {
	float: left;
	font-size: 16px;
	line-height: 26px;
	color: #409eff;
}
.timeSort {
	margin-left: 50px;
}
.align-c {
	width: 24px;
	height: 24px;
	background: #f5c947;
	border-radius: 12px;
	display: inline-block;
	text-align: center;
	line-height: 24px;
	color: #fff;
}

.el-dropdown-link {
	cursor: pointer;
	color: #409eff;
}
.el-icon-arrow-down {
	font-size: 12px;
}
</style>